<script setup>
import { ref } from 'vue';

const sliderValue = ref(50);
const customSliderValue = ref(40);
const verticalSliderValue = ref(50);
const smallSliderValue = ref(30);
const mediumSliderValue = ref(50);
const largeSliderValue = ref(70);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Slider Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Slider</h3>
        <div class="flex flex-col space-y-8">
          <div>
            <h4 class="mb-2">Default Slider</h4>
            <Slider v-model="sliderValue" />
            <div class="mt-2">Value: {{ sliderValue }}</div>
          </div>

          <div>
            <h4 class="mb-2">Disabled Slider</h4>
            <Slider disabled :value="30" />
          </div>

          <div>
            <h4 class="mb-2">Slider with Custom Min/Max/Step</h4>
            <Slider
              :min="0"
              :max="200"
              :step="10"
              v-model="customSliderValue"
            />
            <div class="mt-2">Value: {{ customSliderValue }}</div>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Slider Variations</h3>
        <div class="flex flex-col space-y-8">
          <div>
            <h4 class="mb-2">Vertical Slider</h4>
            <div class="h-40">
              <Slider orientation="vertical" v-model="verticalSliderValue" />
              <div class="mt-2">Value: {{ verticalSliderValue }}</div>
            </div>
          </div>

          <div>
            <h4 class="mb-2">Slider Sizes</h4>
            <div class="space-y-4">
              <div>
                <p class="text-sm">Small</p>
                <Slider size="small" v-model="smallSliderValue" />
              </div>
              <div>
                <p class="text-sm">Medium (default)</p>
                <Slider size="medium" v-model="mediumSliderValue" />
              </div>
              <div>
                <p class="text-sm">Large</p>
                <Slider size="large" v-model="largeSliderValue" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
